<template>
  <div style="background-color: #ebebeb; height: 100%" v-if="orderDetail">
    <div class="top">
      <van-nav-bar
        fixed
        title="房间预定"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
      </van-nav-bar>
    </div>
    <div
      class="card"
      style="justify-content: flex-start; align-items: flex-start"
    >
      <img style="width: 40vw" :src="orderDetail.room_img" />
      <div class="roomInfo">
        <div>{{ orderDetail.hotel_title }}</div>
        <div>{{ orderDetail.type }}</div>
        <div style="font-size: 12px; color: #b2b2b2">
          <span>无早餐 </span>
          <span>可住2人 </span>
          <span>有窗 </span>
          <span>50㎡ </span>
        </div>
      </div>
    </div>
    <div class="card">
      <div>
        <span>{{ moment(dateIn).format("MM月DD日") }}</span
        ><span class="graySpan">入住时间</span>
      </div>
      <div class="day">共{{ moment(dateOut).diff(dateIn, "days") }}晚</div>
      <div>
        <span>{{ moment(dateOut).format("MM月DD日") }}</span
        ><span class="graySpan">离店时间</span>
      </div>
    </div>
    <div class="info">
      <div style="margin: 0; justify-content: flex-start">
        <span>入住信息</span>
        <span class="graySpan"> 姓名需与证件一致，只需填写一个入住人 </span>
      </div>
      <div>
        <div>房间数量</div>
        <van-stepper
          v-model="roomNum"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>
      <div>
        <div>入住人数</div>
        <van-stepper
          v-model="peopleNum"
          theme="round"
          button-size="22"
          disable-input
        />
      </div>
      <van-field
        v-model="name"
        label="联系人"
        placeholder="请输入您的真实姓名"
        input-align="right"
      />
      <van-field
        v-model="tel"
        type="tel"
        label="手机号"
        placeholder="请输入您的联系方式"
        input-align="right"
      />
    </div>
    <div class="info">
      本单可享
      <div style="padding: 5vw 0 0 0">
        <span style="margin-right: 10vw">优惠</span>
        <span style="font-size: 14px; color: #d25320"
          >会员订单打八折,本单共优惠￥{{ (yh * roomNum).toFixed(2) }}
        </span>
      </div>
    </div>
    <van-radio-group v-model="bankCard">
      <van-cell-group class="info">
        <p style="margin: 0; padding-bottom: 10px">选择支付的银行卡</p>
        <van-cell
          icon="credit-pay"
          v-for="item in bankCardInfo"
          :key="item.id"
          :title="`尾号${item.bank_card.substring(12, 16)}银行卡`"
          clickable
          @click="choseBankCard(item.bank_card)"
        >
          <template #right-icon>
            <van-radio :name="item.bank_card" style="width: 20vw" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <div class="pay">
      <div class="price">￥{{ orderDetail.room_prcie.toFixed(2) }}</div>
      <van-button square type="primary" @click="toPay">立即支付</van-button>
      <van-popup
        v-model="show"
        position="bottom"
        closeable
        :round="true"
        :style="{ height: '70vh', background: '#ebebeb' }"
        @close="ifPay()"
      >
        <div style="margin: 5vw; text-align: center">请输入密码</div>
        <van-password-input :value="passsWord" :gutter="10" :focused="true" />
        <van-number-keyboard
          v-model="passsWord"
          :show="true"
          theme="custom"
          maxlength="6"
          close-button-text="确认"
          @blur="passsWord = ''"
          @close="paySuccess"
        />
      </van-popup>
    </div>

    <!-- <bottom-tabbar /> -->
  </div>
</template>

<script>
import BottomTabbar from "@/components/BottomTabbar.vue";
import { Dialog, Toast } from "vant";
import moment from "moment";
import { mapState } from "vuex";
export default {
  components: { BottomTabbar },
  data() {
    return {
      moment,
      uid: sessionStorage.getItem("uid"),
      dateIn: sessionStorage.getItem("dateIn"),
      dateOut: sessionStorage.getItem("dateOut"),
      roomNum: 1, //房间数量
      peopleNum: 1, //房间数量
      name: "", //入住人姓名
      tel: "", //入住人联系方式
      show: false, //显示弹出层
      passsWord: "", //支付密码
      isPaySuccess: false, //是否确认支付
      // payPwd: "",
      bankCard: "", //获取选中的银行卡
    };
  },
  computed: {
    ...mapState({ bankCardInfo: (state) => state.card.bankCard }),
    orderDetail() {
      let { price, yh, ...args } = JSON.parse(
        sessionStorage.getItem("orderInfo")
      );
      let obj = {
        ...args,
        room_prcie: price * this.roomNum,
        name: this.name,
        phone: this.tel,
        room_num: this.roomNum,
        people_num: this.peopleNum,
        check_in: moment(this.dateIn).format("YY-MM-DD"),
        leave: moment(this.dateOut).format("YY-MM-DD"),
      };
      return obj;
    },
    yh() {
      let { yh } = JSON.parse(sessionStorage.getItem("orderInfo"));
      return yh;
    },
  },
  mounted() {
    this.$store.dispatch("getBankCardInfo", this.uid);
  },
  methods: {
    choseBankCard(id) {
      this.bankCard = id;
    },
    onClickLeft() {
      history.go(-1);
    },
    // 点击立即去支付,进行填写信息的判断和银行卡绑定判断
    toPay() {
      if (this.bankCardInfo.length == 0 || this.bankCard == "") {
        Dialog.confirm({
          message: "您未绑定支付账号,请前往绑定",
        }).then(() => {
          this.$router.push("/addbankcard");
        });
      }
      if (this.name == "" || this.tel == "") {
        Toast("请填写完整信息");
        return;
      }
      const reg = /^1\d{10}$/;
      if (!reg.test(this.tel)) {
        Toast("手机号不正确");
        return;
      }
      this.show = true;
      this.$store.dispatch("getPayPassword", {
        uid: this.uid,
        bankCard: this.bankCard,
      });
    },
    // 点击确认支付，进行密码判断和是否放弃支付
    paySuccess() {
      let payPwd = this.$store.state.card.payPassword + "";
      console.log(payPwd, this.passsWord);
      if (payPwd !== this.passsWord) {
        Toast("密码错误");
        this.passsWord = "";
      } else {
        // 支付成功
        Toast.success("支付成功");
        this.isPaySuccess = true;
        let params = {
          ...this.orderDetail,
          oid: "1",
          state: "已支付",
        };
        this.$store.dispatch("addOrder", params);
        this.$router.push("/orderlist");
        sessionStorage.removeItem("orderInfo");
      }
    },
    // 是否取消支付
    ifPay() {
      // 支付成功直接返回
      if (this.iSPaySuccess) return;
      Dialog.confirm({
        message: "是否放弃支付",
      }).then(() => {
        let params = {
          ...this.orderDetail,
          oid: "0",
          state: "未支付",
        };
        this.$store.dispatch("addOrder", params);
        this.$router.push("/orderlist");
        sessionStorage.removeItem("orderInfo");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 13vw;
  .van-nav-bar {
    background-color: #f5b400;

    color: #fff;
    ::v-deep .van-nav-bar__text {
      color: #fff;
    }
    ::v-deep .van-nav-bar__title {
      color: #fff;
    }
    ::v-deep .van-icon {
      color: #fff;
    }
  }
}
.graySpan {
  font-size: 12px;
  color: #bbb;
  margin-left: 1vw;
}
.card {
  margin: 2vw 2vw;
  padding: 4vw;
  border-radius: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  .roomInfo {
    height: 24.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    div {
      padding-left: 2vw;
    }
  }
  .day {
    border: #898989 solid 1px;
    border-radius: 4vw;
    padding: 1vw 2vw;
    font-size: 14px;
  }
}

.info {
  margin: 0vw 2vw;
  margin-top: 2vw;
  padding: 4vw;
  border-radius: 1vw;
  background: #fff;

  .graySpan {
    font-size: 12px;
    color: #bbb;
    margin-left: 1vw;
  }

  > div div[data-v-3c1ef684] {
    font-size: 16px;
  }

  > div {
    line-height: 24px;
    margin: 0px 16px;
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;

    div {
      font-size: 14px;
      color: #646566;
      width: 100px;
    }

    ::v-deep .van-stepper__minus {
      color: #f5b400;
      border: 1px solid #f5b400;
    }
    ::v-deep .van-stepper__plus {
      background-color: #f5b400;
    }
  }
  .van-field {
    width: 80vw;
    padding: 10px 0px;
    margin: 0px 16px;
  }
  ::v-deep .van-field__control {
    color: #645566;
  }
}
.pay {
  margin: 2vw 2vw 0vw 2vw;
  padding: 4vw 6vw;
  height: 15vw;
  box-sizing: border-box;
  // position: sticky;
  // bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .price {
    margin-right: 5vw;
  }

  ::v-deep .van-button--primary {
    border: 1px solid #f5b400;
    background-color: #f5b400;
    border-radius: 5vw;
    height: 10vw;
  }
}
</style>
